<script>
export default {
  inject: {
    calcDetailsHeight: { default: null }
  },
  name: 'TabNav',
  props: {
    panes: {
      type: Array,
      default: () => []
    },
  },
  components: {},
  data() {
    return {};
  },
  methods: {
    handleNavClick(value) {
      this.$parent.setCurrentName(value);
      this.$nextTick(_ => {
        this.calcDetailsHeight && this.calcDetailsHeight();
      })
    }
  },
  render(createElement) {
    const { panes } = this;
    const tabsItems = [];
    this._l(panes, (pane, index) => {
      const tabName = pane.$slots.name || pane.name;
      tabsItems.push(createElement('div', {
        class: {
          'tab-item': true,
          'active': this.$parent.currentName === tabName
        },
        on: {
          click: this.handleNavClick.bind(this, tabName)
        }
      }, tabName))
    });
    return createElement('div', {
      class: ['tab-nav']
    }, tabsItems)
  }
};
</script>

<style lang='stylus'>
$theme-color = #3eaf7c

.tab-nav
  display: flex
  padding: 10px
  border-bottom: 1px solid #505050

.tab-item
  margin-right: 8px
  padding: 0 15px
  line-height: 35px
  border-radius: 5px
  color: #fff
  cursor: pointer
  transition: all 0.4s

  &.active
    color: $theme-color
    background-color: #fff
</style>
